<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>PostWomon websocket 调试工具</title>
    <link rel="stylesheet" href="model/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="app" class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="form-inline">
                    <div class="form-group">
                        <label>WS URI</label>
                        <input v-model="wsUri" style="width: 500px;" type="text" class="form-control" placeholder="ws://127.0.0.1:8080?">
                    </div>

                    <span class="btn btn-default btn-link glyphicon glyphicon-time" @click="connHistroy"></span>
                    <button class="btn btn-default btn-success glyphicon glyphicon-ok" @click="conn"></button>
                    <button class="btn btn-default btn-danger glyphicon glyphicon-remove" @click="disConn"></button>
                    <span class="label label-success pull-right" v-if="state">.</span>
                    <span class="label label-danger pull-right" v-if="!state">.</span>
                </div>
            </div>
            <table class="table table-striped" v-show="uris.action">

                    <tr v-for="(uri,index) in uris.list">
                        <td>{{index + 1}}</td>
                        <td @click="selectOne(uri)">{{uri}}</td>
                        <td><span title="移除历史连接 | remove historical connection " class="glyphicon glyphicon-remove btn btn-link btn-xs" @click="removeHistroy(index)"></span></td>
                    </tr>
            </table>
        </div>

        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-default">
                    <table class="table table-striped">
                        <tr>
                            <th style="width: 75%;">API</th>
                            <th></th>
                        </tr>
                        <tr v-for="item in  apiList" @click=reSelect(item)>
                            <td>{{item.title}}</td>
                            <td>
                                <spen class="btn btn-link btn-xs glyphicon glyphicon-remove" @click="del(item)"></spen>
                            </td>
                        </tr>
                    </table>
                </div>


                <div class="panel panel-default">
                    <div class="panel-heading">
                        &lt; / &gt; <a href="#" class="pull-right">作者:金融大饿</a>
                    </div>
                    <div class="panel-body">
                        <a class="btn btn-link"
                            href="https://gitee.com/ichiva/post-women.git">https://gitee.com/ichiva/post-women.git</a>
                    </div>
                </div>

            </div>
            <div class="col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading form-inline">
                        <div class="form-group">
                            <label>API: </label>
                            <input type="text" style="width:200px" class="form-control" v-model="api.title" placeholder="name">
                        </div>
                        <button type="submit" class="btn btn-info glyphicon glyphicon glyphicon-saved" @click="save"></button>
                        <label class="pull-right"><span class="btn btn-link glyphicon glyphicon-cog" @click.prevent="af"></span></label>
                    </div>
                    <table class="table table-striped" v-if="formatObj.open">
                        <tr>
                            <th>
                                自定义发送消息格式化 <button class="btn btn-warning btn-xs" @click.prevent="resetSendFormat">恢复默认</button>
                            </th>
                            <th>
                                自定义接收消息格式化 <button class="btn btn-warning btn-xs" @click.prevent="resetReceiveFormate">恢复默认</button>
                            </th>
                        </tr>
                        <tr>
                            <td>
                                <textarea style="width:100%" rows="10" class="form-control" v-model="formatObj.sendFormate"></textarea>
                            </td>
                            <td>
                                <textarea style="width:100%" rows="10" class="form-control" v-model="formatObj.receiveFormate"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button class="btn btn-danger btn-xs" @click.prevent="reset">初始化</button>
                            </td>
                            <td>
                            </td>
                        </tr>
                    </table>
                    <div class="panel-body">
                        <div class="row">
                            <div class="form-group col-md-6">
                                <div class="form-inline">
                                    <label><button class="btn btn-primary glyphicon glyphicon-th-list" @click="format"></button></label>
                                    <label class="pull-right"><button style="width: 70px;" class="btn btn-primary glyphicon glyphicon-send" @click="send"></button></label>
                                </div>

                                <textarea class="form-control" rows="20" v-model="api.req"
                                    placeholder="发送消息..."></textarea>
                            </div>
                            <div class="form-group col-md-6">
                                <div class="form-inline">
                                    <label class="pull-right"><button style="width: 70px;" class="btn btn-warning glyphicon glyphicon-trash" @click="clean"></button></label>
                                </div>
                                <textarea class="form-control" rows="20" v-model="api.res"
                                    placeholder="收到的消息..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="Store.js"></script>
<script src="model/vue/2.5.2/vue.min.js"></script>
<script src="index.js"></script>

</html>